<template>
  <div class="Sli">
    <van-swipe
      class="my-swipe"
      :autoplay="3500"
      duration="1000"
      indicator-color="white"
      @change="onChange"
      v-if="vanswipe[0]"
    >
      <van-swipe-item v-for="(item, index) in vanswipe" :key="index">
        <van-image v-lazy="item.url" fit="fill" :src="item.url" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator" v-show="showIndicators">
          {{ current + 1 }}/{{ vanswipe.length }}
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
// import condIty from "@/components/CommodityList.vue"
import { Swipe, SwipeItem } from "vant";
import { Image } from "vant";
import { Lazyload } from 'vant';
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Image.name]: Image,
      [Lazyload.name]: Lazyload,
  },
  props: ["luobo"],
  watch: {
    // 使用监听的方式，监听数据的变化
    luobo(val) {
      this.vanswipe = [];
      this.vanswipe = val;
      // console.log(val[0].showIndicators);
      // console.log(val)

      if (val[0].showIndicators != undefined) {
        this.showIndicators = val[0].showIndicators;
      }
    },
  },
  data() {
    return {
      vanswipe: [],
      current: 0,
      // 指示器
      // 如果不需要指示器的话在第一个数组对象里面传入一个键名为showIndicators的，值为flass的
      showIndicators: true,
    };
  },
  mounted() {},
  methods: {
    // 自定义指示器样式
    onChange(index) {
      this.current = index;
      // 实在是词语穷了就起这个名字吧，把下标传回去让他自定义指示器
      this.$emit("slideshowIndex", index);

    },
    // 拿到数据
  },
};
</script>

<style lang="less">
.custom-indicator {
  position: absolute;
  right: 5px;
  color: rgb(245, 245, 245);
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.Sli {
  margin-top: 2px;
  width: 100%;
  height: 100%;
  //C
  
  .my-swipe {
    width: 100%;
    height: 100%;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img {
      width: 100%;
      // height: 100%;
    }
  }
}
</style>

